<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生社交媒体与人际关系分析仪表盘</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- 直接加载本地替代实现 -->
    <script src="/static/js/simple_chart.js"></script>
    <style>
        body { 
            font-family: 'Microsoft YaHei', sans-serif; 
            background-color: #f8f9fa;
        }
        .loading-spinner {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }
        .chart-container {
            position: relative;
            height: 350px;
            margin-bottom: 20px;
        }
        .card {
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .alert {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 加载指示器 -->
    <div class="loading-spinner" id="loadingSpinner">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
    </div>

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">学生社交媒体与人际关系分析系统</a>
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <a class="nav-link active" href="/">仪表盘</a>
                    <a class="nav-link" href="/about">关于</a>
                </div>
                <button id="runAnalysisBtn" class="btn btn-light ms-auto">运行完整分析</button>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <h1 class="text-center mb-5">学生社交媒体与人际关系分析仪表盘</h1>
        
        <!-- 消息区域 -->
        <div id="messageArea"></div>
        
        <!-- 模型指标卡片 -->
        <div class="row mb-5">
            <div class="col-md-3">
                <div class="card text-center bg-light">
                    <div class="card-body">
                        <h5 class="card-title text-primary">准确率</h5>
                        <p class="card-text display-4">85.2%</p>
                        <p class="card-text text-muted">模型预测准确率</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-light">
                    <div class="card-body">
                        <h5 class="card-title text-success">精确率</h5>
                        <p class="card-text display-4">82.6%</p>
                        <p class="card-text text-muted">预测正面案例准确率</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-light">
                    <div class="card-body">
                        <h5 class="card-title text-warning">召回率</h5>
                        <p class="card-text display-4">88.3%</p>
                        <p class="card-text text-muted">负面影响人群识别率</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-light">
                    <div class="card-body">
                        <h5 class="card-title text-danger">F1分数</h5>
                        <p class="card-text display-4">0.85</p>
                        <p class="card-text text-muted">综合评价指标</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要图表区域 -->
        <div class="row">
            <!-- 平台用户数量对比图表 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h3>各平台用户数量对比</h3>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="platformChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 心理健康评分图表 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <h3>各平台用户心理健康评分</h3>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="mentalHealthChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 第二行图表 -->
        <div class="row mt-4">
            <!-- 各国使用时长图表 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h3>各国社交媒体使用时长对比</h3>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="countryUsageChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 学习成绩受影响比例图表 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-warning text-white">
                        <h3>各平台学习成绩受影响比例</h3>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="academicImpactChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        const mockPlatformData = {
            '微信': { user_count: 1200, avg_mental_health: 7.2, academic_impact_rate: 35 },
            'QQ': { user_count: 800, avg_mental_health: 6.8, academic_impact_rate: 42 },
            '微博': { user_count: 530, avg_mental_health: 6.5, academic_impact_rate: 48 },
            '抖音': { user_count: 600, avg_mental_health: 6.2, academic_impact_rate: 52 },
            '知乎': { user_count: 250, avg_mental_health: 7.8, academic_impact_rate: 28 }
        };
        
        const mockCountryData = {
            '中国': { avg_daily_usage: 3.5 },
            '美国': { avg_daily_usage: 2.8 },
            '日本': { avg_daily_usage: 2.3 },
            '韩国': { avg_daily_usage: 3.1 },
            '英国': { avg_daily_usage: 2.5 }
        };

        document.addEventListener('DOMContentLoaded', function() {
            // 检查Chart是否已加载
            if (typeof Chart !== 'undefined') {
                console.log('Chart.js已通过本地替代实现成功加载');
                
                // 创建成功消息
                const successMessage = document.createElement('div');
                successMessage.className = 'alert alert-success';
                successMessage.role = 'alert';
                successMessage.textContent = 'Chart.js已成功加载并显示图表！';
                document.getElementById('messageArea').appendChild(successMessage);
                
                // 初始化图表
                initCharts();
            } else {
                console.error('Chart.js未加载成功');
                
                // 创建错误消息
                const errorMessage = document.createElement('div');
                errorMessage.className = 'alert alert-danger';
                errorMessage.role = 'alert';
                errorMessage.textContent = '无法加载Chart.js，请刷新页面重试。';
                document.getElementById('messageArea').appendChild(errorMessage);
            }
        });

        function initCharts() {
            // 平台用户数量图表
            const platformCtx = document.getElementById('platformChart').getContext('2d');
            const platforms = Object.keys(mockPlatformData);
            const userCounts = platforms.map(p => mockPlatformData[p].user_count);
            
            new Chart(platformCtx, {
                type: 'bar',
                data: {
                    labels: platforms,
                    datasets: [{
                        label: '用户数量',
                        data: userCounts,
                        backgroundColor: 'rgba(75, 192, 192, 0.7)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '用户数量'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '平台'
                            }
                        }
                    }
                }
            });
            
            // 心理健康评分图表
            const mentalHealthCtx = document.getElementById('mentalHealthChart').getContext('2d');
            const mentalHealthScores = platforms.map(p => mockPlatformData[p].avg_mental_health);
            
            new Chart(mentalHealthCtx, {
                type: 'radar',
                data: {
                    labels: platforms,
                    datasets: [{
                        label: '心理健康评分',
                        data: mentalHealthScores,
                        backgroundColor: 'rgba(153, 102, 255, 0.2)',
                        borderColor: 'rgba(153, 102, 255, 1)',
                        pointBackgroundColor: 'rgba(153, 102, 255, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(153, 102, 255, 1)'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        r: {
                            min: 0,
                            max: 10,
                            ticks: {
                                stepSize: 2
                            }
                        }
                    }
                }
            });
            
            // 各国使用时长图表
            const countryUsageCtx = document.getElementById('countryUsageChart').getContext('2d');
            const countries = Object.keys(mockCountryData);
            const avgUsages = countries.map(c => mockCountryData[c].avg_daily_usage);
            
            new Chart(countryUsageCtx, {
                type: 'bar',
                data: {
                    labels: countries,
                    datasets: [{
                        label: '平均每日使用时长(小时)',
                        data: avgUsages,
                        backgroundColor: 'rgba(54, 162, 235, 0.7)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '使用时长(小时)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '国家'
                            }
                        }
                    }
                }
            });
            
            // 学习成绩受影响比例图表
            const academicImpactCtx = document.getElementById('academicImpactChart').getContext('2d');
            const academicImpactRates = platforms.map(p => mockPlatformData[p].academic_impact_rate);
            
            new Chart(academicImpactCtx, {
                type: 'bar',
                data: {
                    labels: platforms,
                    datasets: [{
                        label: '学习成绩受影响比例(%)',
                        data: academicImpactRates,
                        backgroundColor: 'rgba(255, 159, 64, 0.7)',
                        borderColor: 'rgba(255, 159, 64, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            title: {
                                display: true,
                                text: '受影响比例(%)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '平台'
                            }
                        }
                    }
                }
            });
        }

        // 运行分析按钮事件
        document.getElementById('runAnalysisBtn').addEventListener('click', function() {
            // 显示加载指示器
            document.getElementById('loadingSpinner').style.display = 'block';
            
            // 发送请求运行分析
            fetch('/run_analysis', {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                // 隐藏加载指示器
                document.getElementById('loadingSpinner').style.display = 'none';
                
                // 显示结果消息
                if (data.status === 'success') {
                    alert('分析已成功完成！页面将刷新以显示最新结果。');
                    location.reload();
                } else {
                    alert('分析失败: ' + data.message);
                }
            })
            .catch(error => {
                // 隐藏加载指示器
                document.getElementById('loadingSpinner').style.display = 'none';
                alert('分析请求失败: ' + error);
            });
        });
    </script>
</body>
</html>